<template>
   <div class="rightBtn" v-show="showrightbtn" id="rightBtn">
       <!-- tab切换 -->
       <div class="tabbtn" :style="{ right: rightArr + 'px' }">
           <div v-for="(item,index) in yearData" :key="index" :class="curent == index ? 'active': 'tabbtnItem'" @click="switchtab(item,index)">
               {{item.year}}
           </div>
       </div>
       <!-- 2020年列表 -->
       <div class="rightBtnList" :style="{ right: rightArr + 'px' }"  v-show="show2020Btn">
           <div class="rightBtnList-one" @click="protectionTarget(title1)" id="rightBtnList-one">
               {{title1}}
           </div>
            <div class="rightBtnList-two" @click="hiddenDanger(title2)" id="rightBtnList-two">
               {{title2}}
           </div>
            <div class="rightBtnList-three" @click="emergencyResources(title3)" id="rightBtnList-three">
               {{title3}}
           </div>
            <div class="rightBtnList-four" @click="governmentBase(title4)" id="rightBtnList-four">
               {{title4}}
           </div>
       </div>
       <!-- 2021年列表-->
       <div class="rightBtnList_fxff" :style="{ right: rightArr + 'px' }" v-show="show2021Btn">
           <div class="rightBtnList_fxff-one" @click="floodWind(title5)" id="rightBtnList_fxff-one">
               {{title5}}
           </div>
       </div>
   </div>
   <div class="rightBtn-content">
       <resourceContent  :titlename="titlename" v-show="showresourceContent"  @childActive="childActive" :childActiveList="childActiveList" ref="resourceContent" @childActiveListArr="childActiveListArr" @childActiveItem="childActiveItem" @editList ="editList" :statusActive1="statusActive1" :statusActive2="statusActive2" :statusActive3="statusActive3" :statusActive5="statusActive5"></resourceContent>
   </div>
</template>

<script>
import resourceContent from './resourceContent.vue'
import axios from "axios";
import { get } from "../../../util/request";
export default {
    data(){
        return{
            title1:'防护目标',
            title2:"风险隐患",
            title3:"应急资源",
            title4:"政务基底",
            title5:"防汛防风",
            statusActive1:0,
            statusActive2:0,
            statusActive3:0,
            statusActive4:0,
            statusActive5:0,
            titlename:"",
            childActiveList:[],
            showresourceContent:false,
            targetEmergeData:null,
            titleData:[],
            sourceData:[],
            childActiveItempoi:[],
            newvaltargetEmergeData:{},
            poiStatus:0,
            showrightbtn:false,
            rightArr:50,
            eventListData:{},
            show2020Btn:false,
            show2021Btn:false,
            currentRadius:0,
            curent:0,
            fhArr:[],
            fxArr:[],
            yjArr:[],
            yearData:[
                {
                    year:2020
                },
                {
                    year:2021
                }
            ]
        }
    },
    watch:{
        targetEmergeData:{
            handler(newval,oldval){
                 if (oldval){
                 this.$refs.resourceContent.clearEntity()
                if(this.statusActive1 ==1 ){
                    setTimeout(()=>{
                         this.$refs.resourceContent.initProtectiontarget(newval)
                    },100)
                }
                if(this.statusActive2 ==1){
                     setTimeout(()=>{
                          this.$refs.resourceContent.initRiskhiddendanger(newval)
                     },500)
                }
                if(this.statusActive3 ==1){
                    setTimeout(()=>{
                        this.$refs.resourceContent.initemergencyResources(newval)
                    },1000)
                }
                if(this.statusActive5 ==1){
                    //  setTimeout(()=>{
                         this.$refs.resourceContent.initFloodWind(newval)
                    // },200)
                }
            }else{
               return 
            }
            },
            immediate: true,
            deep:true
        },
    },
    components:{
        resourceContent
    },
    mounted(){
        this.$mybus.on("resourceEmitData", (info) => {
        this.targetEmergeData = info;
        this.showrightbtn= true
        this.show2020Btn = true
        });
        this.$mybus.on("resetchildActiveList", (info) => {
         if(info == true){
            //隐藏按钮和类别展示列表
            this.rightArr = 50
            this.showresourceContent = false
            this.changeButton()
         }
        });
        
    },
    methods:{
        switchtab(item,index){
            this.curent = index
            this.rightArr = 416
            this.showresourceContent = true
            if(item.year == 2020){
                this.show2020Btn = true
                this.show2021Btn = false
                this.statusActive5 = 0
            }else if(item.year == 2021){
                this.show2021Btn = true
                this.show2020Btn = false
                this.$refs.resourceContent.clearEntity()
                this.statusActive1=0
                this.statusActive2=0
                this.statusActive3=0
                this.statusActive4=0
            } 
        },
        floodWind(item){
            this.titlename = item
            if(this.statusActive5 == 0){
               this.showresourceContent = true
               var rightBtnList1 = document.getElementById("rightBtnList_fxff-one");
               rightBtnList1.style.background ="url('/images/yjjy/防汛防风-active.png')"
               rightBtnList1.style.backgroundSize ='100% 100%'
               this.rightArr = 416
               this.statusActive5 = 1
            }else if(this.statusActive5 == 1){
                var rightBtnList1 = document.getElementById("rightBtnList_fxff-one");
               rightBtnList1.style.background ="url('/images/yjjy/防汛防风.png')"
                rightBtnList1.style.backgroundSize ='100% 100%'
                this.statusActive5 = 0
            }
        },
        //取消高亮按钮状态
        changeButton(){
            //statusActive 高亮状态默认值 0 不高亮  1是高亮
            if(this.statusActive1==1){
                var rightBtnList1 = document.getElementById("rightBtnList-one");
               rightBtnList1.style.background ="url('/images/yjjy/防护目标.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive1 = 0
                this.$refs.resourceContent.clearEntity()
            }
            if(this.statusActive2==1){
                 var rightBtnList1 = document.getElementById("rightBtnList-two");
                rightBtnList1.style.background ="url('/images/yjjy/风险隐患.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive2 = 0
                this.$refs.resourceContent.clearEntity()
            }
            if(this.statusActive3==1){
                 var rightBtnList1 = document.getElementById("rightBtnList-three");
               rightBtnList1.style.background ="url('/images/yjjy/应急资源.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive3 = 0
                this.$refs.resourceContent.clearEntity()
            }
            if(this.statusActive4==1){
                var rightBtnList1 = document.getElementById("rightBtnList-four");
                rightBtnList1.style.background ="url('/images/yjjy/政务基底.png')"
                rightBtnList1.style.backgroundSize ='100% 100%'
                this.statusActive4 = 0
            }
             if(this.statusActive5==1){
                var rightBtnList1 = document.getElementById("rightBtnList-four");
                rightBtnList1.style.background ="url('/images/yjjy/政务基底.png')"
                rightBtnList1.style.backgroundSize ='100% 100%'
                this.statusActive5 = 0
            }
        },
        childActiveListArr(){
			this.childActiveList=[]
		},
        editList(val){
            this.childActiveList = val
        },
        childActive(val){
			let have = this.childActiveList.filter(ele=>ele === val.kbId)[0]
			if(have){
                 this.$refs.resourceContent.removeEntity(val.kbId)
			     this.childActiveList = this.childActiveList.filter(ele=>ele !== val.kbId)
			}else if(val.count>0){
				this.childActiveList.push(val.kbId)
			    this.$refs.resourceContent.initPoi(val)
			}
		},
        childActiveItem(val){
            this.childActiveItempoi.push(val)
        },
        // 防护目标
        protectionTarget(item){
              this.titlename = item
            if(this.statusActive1 == 0){
                this.showresourceContent = true
               var rightBtnList1 = document.getElementById("rightBtnList-one");
               rightBtnList1.style.background ="url('/images/yjjy/防护目标-active.png')"
               rightBtnList1.style.backgroundSize ='100% 100%'
                this.rightArr = 416
               this.statusActive1 = 1
            }else if(this.statusActive1 == 1){
                var rightBtnList1 = document.getElementById("rightBtnList-one");
               rightBtnList1.style.background ="url('/images/yjjy/防护目标.png')"
                rightBtnList1.style.backgroundSize ='100% 100%'
                this.statusActive1 = 0
            }
        },
        // 风险隐患
        hiddenDanger(item){
              this.titlename = item
            if(this.statusActive2 == 0){
                this.showresourceContent = true
               var rightBtnList1 = document.getElementById("rightBtnList-two");
               rightBtnList1.style.background ="url('/images/yjjy/风险隐患-active.png')"
               rightBtnList1.style.backgroundSize ='100% 100%'
                this.rightArr = 416
               this.statusActive2 = 1
            }else if(this.statusActive2 == 1){
                var rightBtnList1 = document.getElementById("rightBtnList-two");
                rightBtnList1.style.background ="url('/images/yjjy/风险隐患.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive2 = 0
                // this.$refs.resourceContent.removeEntityStatusdanger()
                // this.sourceData=this.fxArr
            }
        },
        // 应急资源
        emergencyResources(item){
             this.titlename = item
            if(this.statusActive3 == 0){
                this.showresourceContent = true
               var rightBtnList1 = document.getElementById("rightBtnList-three");
               rightBtnList1.style.background ="url('/images/yjjy/应急资源-active.png')"
               rightBtnList1.style.backgroundSize ='100% 100%'
                this.rightArr = 416
               this.statusActive3 = 1         
            }else if(this.statusActive3 == 1){ 
                var rightBtnList1 = document.getElementById("rightBtnList-three");
               rightBtnList1.style.background ="url('/images/yjjy/应急资源.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive3 = 0
                // this.sourceData=this.yjArr
            }
        },
        // 政务基底
        governmentBase(item){
            if(this.statusActive4 == 0){
                this.showresourceContent = true
                this.titlename = item
               var rightBtnList1 = document.getElementById("rightBtnList-four");
               rightBtnList1.style.background ="url('/images/yjjy/政务基底-active.png')"
               rightBtnList1.style.backgroundSize ='100% 100%'
                 this.rightArr = 416
               this.statusActive4 = 1
            }else if(this.statusActive4 == 1){
                  this.titlename = item
                var rightBtnList1 = document.getElementById("rightBtnList-four");
               rightBtnList1.style.background ="url('/images/yjjy/政务基底.png')"
                 rightBtnList1.style.backgroundSize ='100% 100%'
                 this.statusActive4 = 0
            }
        },
    }
}
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
  .rightBtn{
       .tabbtn{
          width:vw(180);
          height:vh(45);
          background:rgb(48, 163, 196);
          position:fixed;
          cursor:pointer;
          top:vh(100);
          right:30px;
		  border:1px solid rgb(17, 81, 120);
        //   border-top: 1px solid rgb(17, 81, 120);
        //   border-left: 1px solid rgb(17, 81, 120);
        //   border-bottom: 1px solid rgb(17, 81, 120);
          display:flex;
          .tabbtnItem{
            width:vw(60);
            height:vh(45); 
            line-height:vh(45);
            // background:#022d40;
            flex:1;
            text-align:center
            // border-right:1px solid #0a4d6a;
          }
         .active{
            width:vw(90);
            height:vh(43); 
            line-height:vh(43);
            cursor: pointer;
            text-align:center;
			border-bottom: 2px solid #ffffff;
            // background: #1398CF;
        }
      }
      .rightBtnList_fxff{
          width:vw(180);
          height:vh(300);
          position:fixed;
          top:vh(160); 
          .rightBtnList_fxff-one{
            width: 100%;
		    height: 40px;
            line-height:vh(40)
            background:url('/images/yjjy/防汛防风.png')
            background-size:100% 100%;
            text-align:center;
            padding-left:vw(20);
            box-sizing:border-box;
            cursor:pointer
            margin-bottom:vh(20)
          }
      }
      .rightBtnList{
          width:vw(180);
          height:vh(300);
          position:fixed;
          top:vh(160);
        //   background:pink;
          .rightBtnList-one{
            width: 100%;
		    height: 40px;
            line-height:vh(40)
            background:url('/images/yjjy/防护目标.png')
            background-size:100% 100%;
            text-align:center;
            padding-left:vw(20);
            box-sizing:border-box;
            cursor:pointer
            margin-bottom:vh(20)
          }
           .rightBtnList-two{
            width: 100%;
		    height: 40px;
            line-height:vh(40)
            background:url('/images/yjjy/风险隐患.png')
            background-size:100% 100%;
            text-align:center;
            padding-left:vw(20);
            box-sizing:border-box;
            cursor:pointer;
            margin-bottom:vh(20)
          }
          .rightBtnList-three{
            width: 100%;
		    height: 40px;
            line-height:vh(40)
            background:url('/images/yjjy/应急资源.png')
            background-size:100% 100%;
            text-align:center;
            padding-left:vw(20);
            box-sizing:border-box;
            cursor:pointer;
            margin-bottom:vh(20)
          }
          .rightBtnList-four{
            width: 100%;
		    height: 40px;
            line-height:vh(40)
            background:url('/images/yjjy/政务基底.png')
            background-size:100% 100%;
            text-align:center;
            padding-left:vw(20);
            box-sizing:border-box;
            cursor:pointer
          }
      }
  }
}
</style>